<template>
	<view class="flex-col page">
		<view class="flex-col group_2">

			<image :src="imgUrl+'16557826684196968135.png'" class="image_6" />

			<view class="flex-col group_3">
               <view class="flex-col group_6">
				 <view class="flex-row group_7">
						<image :src="imgUrl+'16557826680563820686.png'" class="image_11 image_12" />
						<input placeholderStyle="color:#bababa" placeholder="请输入手机号" v-model="form.phone"
							placeholderClass="placeholderClass" border="none" class="input" clearable maxlength="11">
						</input>
					</view>
				</view>
				<!-- 验证码 -->
				<view class="flex-col group_8">
					<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_13" />
					<view class="justify-between group_7">
						<view class="flex-row">
							<image :src="imgUrl+'16557826687461271724.png'" class="image_11 image_14" />
							<input placeholderStyle="color:#bababa" placeholder="请输入验证码" v-model="form.registerCode"
								border="none" class="input " style="width: 170px;" clearable maxlength="10"></input>
						</view>
						<text class="text_3" @tap="getCode">{{tips}}</text>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" ref="uCode" @change="codeChange">
							</u-code>
						</view>
					</view>
					<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_15" />
				</view>
				<!-- 请输入密码 -->
				<view class="justify-between group_10 w-full">
					<view class="flex-row">
						<image :src="imgUrl+'16557826680099271215.png'" class="image_11 image_16" />
					
							<input v-if="seen" type="text" placeholder="请输入密码(6~12位字母+数字)"
								maxlength="12" border="none" v-model="form.password"  class="input u-flex-1 " 
								clearable></input>
							<input border="none" v-else  type="password" placeholder="请输入密码(6~12位字母+数字)"
									maxlength="12" v-model="form.password"  class="input u-flex-1" 
									clearable></input>
					</view>
					<image class="image100" v-show='seen' @click="changeSeen" :src="imgUrl+'login/open.png'" />
					<image v-show='!seen' @click="changeSeen" :src="imgUrl+'16557826676388745889.png'"
						class="image_11" />
				</view>

				<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_18" />
			</view>
		
			<view class="flex-col group_12">
				<view class="flex-col items-center button" @click="reg"><text class="text_5">确定</text></view>
		
			</view>
		
			</u--form>
		</view>
	

	</view>
</template>

<script>
	import {
		genTestUserSig
	} from '@/static/js/tim/GenerateTestUserSig.js';
	const app = getApp();
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				istext: true,
				istexts: false,
				userText: '请选择用户角色',
				seen: false,
				type_text: "text",
				type_password: "password",
				show: false,
				unionid:'',
				checked: [],
				tips: '',
				seconds: 60,
				imgUrl:this.$IMG_URL,
				form: {
				    unionId:'',
					phone: '',
					registerCode: '',
					password: '',
					openId:''
				}
			};
		},
		onLoad(option) {
			if(option.unionid  && option.openId)
			{
				this.form.unionId=option.unionid
				this.form.openId=option.openId
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
	       ...mapActions(['getUserInfo']),
			changeSeen() {
				this.seen = !this.seen;
			},
			codeChange(text) {
				this.tips = text;
			},
		   reg() {

				if (this.form.phone == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.$u.toast('手机号码格式错误');
						return;
					}
				}
				if (this.form.registerCode == '') {
					this.$u.toast('请输入验证码');
					return;
				}
				if (this.form.password == '' || this.form.password.length < 6) {
					this.$u.toast('密码至少6位(字母+数字)');
					return;
				} else {
					let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);

					if (!reg.test(this.form.password)) {
						this.$u.toast('密码格式错误,至少6位(字母+数字)');
						return;
					}
				}
			   console.log(this.form);
				this.$http('luser.wxLoginBindConsumer', this.form).then(r => {
					console.log(r);
					if (r.code == 200) {
						// this.$u.toast(r.msg);
						// this.go('/pages/login/login');
						if(r.data.imUserId)
						{
						  this.loginTim(r.data.imUserId);	
						}
                        this.getUserInfo(r.data);
	                    this.$store.dispatch('setHomeIndex', 0);
						uni.switchTab({
							url:'/pages/index/my'
						})
					
					}else{
						this.$u.toast(r.msg);
					}
				})
			},
			loginTim(userID) {
			
				const SDKAppID = app.globalData.SDKAppID;
				const userSig = genTestUserSig(userID).userSig;
				console.log(`TUI-login | login  | userSig:${userSig} userID:${userID}`);
				// #ifdef  APP-PLUS
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-APP',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				// #endif
				// #ifdef MP-WEIXIN  
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-MP-WEIXIN',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				// #endif
				// #ifdef H5
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-H5',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				// uni.showToast({
				// 	title: 'TUIKit 暂不支持 H5 / web ，请使用者自己完成兼容哦～ ',
				// 	icon: 'none',
				// 	duration: 3000
				// });
				// #endif
				app.globalData.userInfo = {
					userSig,
					userID
				};
				uni.setStorage({
					userInfo: app.globalData.userInfo
				})
			
				uni.setStorageSync(`TIM_${getApp().SDKAppID}_isTUIKit`, true);
				uni.$TUIKit.login({
					userID: userID,
					userSig: userSig
				}).then(() => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: 'login-success',
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				}).catch((error) => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: `login-failed#error:${error}`,
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				})
			
				// 登录原生插件
				// #ifdef APP-PLUS
				if (typeof(uni.$TUICalling) == 'undefined') {
					// uni.showToast({
					// 	title: '如果需要音视频功能，请集成插件使用真机运行并且自定义基座调试哦～',
					// 	icon: 'none',
					// 	duration: 3000
					// });
					console.log(
						'请使用真机运行并且自定义基座调试，否则影响音视频功能～ 插件地址：https://ext.dcloud.net.cn/plugin?id=7097 , 调试地址：https://nativesupport.dcloud.net.cn/NativePlugin/use/use'
					);
				} else {
					uni.$TUICalling.login({
							sdkAppID: SDKAppID,
							userID: userID,
							userSig: userSig
						},
						res => {
							console.log(JSON.stringify(res.msg));
							uni.showToast({
								title: 'login',
								icon: 'none'
							});
						}
					);
				}
			
				// #endif
				if (this.path && this.path !== 'undefined') {
					uni.redirectTo({
						url: this.path
					});
				} else {
					uni.switchTab({
						url: '/pages/index/my'
					});
				}
			},
			getCode() {
				if (this.form.phone == '') {
					this.$u.toast('请输入手机号码');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.$u.toast('请输入正确的手机号码');
						return;
					}
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('user.code', {
						phone: this.form.phone
					}).then(r => {
						if (r.code == 200) {
							this.form.registerCode = r.data;
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(r.msg);
						}
					});

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			

		},
	};
</script>

<style scoped lang="scss">
	.image100 {
		width: 42rpx;
		height: 34rpx;
	}

	.agreement {
		margin-top: 70rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 38rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 38rpx;
		color: RGBA(153, 153, 153, 1);
		opacity: 1;

	

	}
	.black {
			color: RGBA(36, 36, 36, 1);
	}
	.input {
		margin-left: 28rpx;
		
	}
	.b-w-f {
			border: 0px;
			outline: 0px;
			width: 250px;
			color: #000;
			font-size: 28rpx;
		}

	.black {
		color: RGBA(55, 55, 55, 1);
	}

	.image_9 {
		width: 638rpx;
		height: 2rpx;
	}

	.group_7 {
		padding-top: 36rpx;
	}

	.image_11 {
		width: 34rpx;
		height: 34rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_2 {
		padding: 88rpx 50rpx 46rpx 56rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.image_6 {
		align-self: center;
		border-radius: 40rpx;
		box-shadow: 0px 8rpx 20rpx 0px #1d6aff1f;
		width: 180rpx;
		height: 180rpx;
	}

	.group_3 {
		margin-top: 38rpx;
	}

	.group_12 {
		margin-top: 97rpx;
	}

	.group_13 {
		margin-top: 101rpx;
	}

	.group_6 {
		margin-top: 44rpx;
	}

	.group_8 {
		margin-top: 45rpx;
	}

	.image_15 {
		margin-left: 4.5rpx;
		margin-top: 44rpx;
	}

	.group_10 {
		padding: 43rpx 0 42rpx;
	}

	.image_18 {
		margin-left: 4.5rpx;
	}

	.button {
		margin-right: 6rpx;
		padding: 19rpx 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.button_1 {
		margin-top: 30rpx;
		align-self: center;
		line-height: 33rpx;
	}

	.image_19 {
		margin-top: 8rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.group_14 {
		margin-left: 12rpx;
		line-height: 26rpx;
		height: 26rpx;
	}

	.image_8 {
		margin-right: 6rpx;
		align-self: center;
		width: 28rpx;
		height: 16rpx;
	}

	.image_10 {
		margin-left: 4rpx;
	}

	.image_13 {
		margin-left: 4rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_6 {
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_9 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_10 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_11 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.image_7 {
		margin-top: 7rpx;
		flex-shrink: 0;
		width: 34rpx;
		height: 36rpx;
	}

	.text {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #bababa;
		font-size: 30rpx;
		font-family: '.AppleSystemUIFont';
	}
	.texts {
			margin-left: 28rpx;
			margin-bottom: 5rpx;
			color: #000000;
			font-size: 32rpx;
			font-family: '.AppleSystemUIFont';
		}

	.image_12 {
		margin-top: 8rpx;
	}

	.text_1 {
		margin-left: 28rpx;
		margin-bottom: 4rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		display: flex;
		align-items: center;
		margin: 3rpx -160rpx 7rpx 0rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_16 {
		flex-shrink: 0;
	}

	.text_4 {
		margin-left: 28rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_14 {
		margin-top: 9rpx;
		flex-shrink: 0;
	}

	.text_2 {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
